import { PlateColorEnum, VehicleTypeEnum } from '@/pages/Parking/Records/types.d';
import { EditTwoTone } from '@ant-design/icons';
import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { Modal, message } from 'antd';
import { changeOrderPlate } from '../../service';
import type { ChangePlateParams } from '../../types.d';

const ChangePlate = (props: {
  orderNo: string;
  plateNumber: string;
  vehicleType: VehicleTypeEnum;
  plateColor: PlateColorEnum;
  reload: () => void;
}) => {
  const { orderNo, plateNumber, vehicleType, plateColor } = props;
  return (
    <ModalForm<ChangePlateParams>
      title="车牌更改"
      width="35vw"
      layout="horizontal"
      modalProps={{ destroyOnClose: true }}
      labelCol={{ span: 6 }}
      wrapperCol={{ span: 14 }}
      trigger={
        <EditTwoTone
          style={{
            // cursor: 'pointer',
            marginLeft: '5px',
          }}
          twoToneColor="#5895d0"
        />
      }
      initialValues={{
        orderNo: orderNo,
        plateNumber,
        vehicleType:
          vehicleType == VehicleTypeEnum.COMMON_LARGE ||
          vehicleType == VehicleTypeEnum.NEW_ENERGY_LARGE
            ? VehicleTypeEnum.COMMON_LARGE
            : VehicleTypeEnum.COMMON_SMALL,
        plateColor,
      }}
      onFinish={async (values) => {
        const res = await changeOrderPlate(values);
        if (res.success) {
          message.success({ key: 'change_plate', content: res.message });
          props.reload();
          return true;
        }
        if (res.message?.length > 20) {
          Modal.error({
            title: '车牌更改失败',
            content: res.message,
            style: {
              minWidth: '600px',
            },
            okText: '确定',
          });
        } else {
          message.error({ key: 'change_plate', content: res.message });
        }
        return false;
      }}
    >
      <ProFormText label="订单编号" name="orderNo" disabled required />
      <ProFormText label="车牌号码" name="plateNumber" required />
      <ProFormSelect
        label="车牌颜色"
        name="plateColor"
        options={[
          {
            value: PlateColorEnum.blue,
            label: '蓝色',
          },
          {
            value: PlateColorEnum.green,
            label: '绿色',
          },
          {
            value: PlateColorEnum.yellow,
            label: '黄色',
          },

          {
            value: PlateColorEnum.white,
            label: '白色',
          },
          {
            value: PlateColorEnum.black,
            label: '黑色',
          },
          {
            value: PlateColorEnum.unknown,
            label: '其他',
          },
        ]}
      />
      <ProFormSelect
        label="车辆类型"
        name="vehicleType"
        options={[
          {
            label: '小型车',
            value: VehicleTypeEnum.COMMON_SMALL,
          },
          {
            value: VehicleTypeEnum.COMMON_LARGE,
            label: '大型车',
          },
        ]}
      />
    </ModalForm>
  );
};

export default ChangePlate;
